﻿@{
    ViewData["Title"] = "支付界面";
}

<div class="container">
    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">支付金额</span>
                </div>
                <input type="number" class="form-control" id="orderAmt" placeholder="请输入支付金额">
            </div>
        </div>
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <select id="orderType" class="custom-select">
                <option value="">请选择订单类型</option>
                <option value="ALIPAY">支付宝</option>
                <option value="WECHAT">微信</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    条码支付，商户扫用户二维码或条码收款
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入条码">
                        <button type="button" id="Micropay" class="btn btn-primary input-group-append">确认</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="micropayResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    条码支付，商户扫用户二维码或条码收款
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12" style="margin-bottom:0.5rem;">
                            <button type="button" id="PreCreate" class="btn btn-primary btn-block">生成支付二维码</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 text-center" style="margin-bottom:0.5rem; width:256px; height:256px;">
                            <img src="~/images/default.jpg" class="img-responsive" id="qrcode" style="max-width: 100%; max-height: 100%;" />
                        </div>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="preCreateResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    退款
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">退款金额</span>
                        </div>
                        <input type="number" class="form-control" id="refundAmt" placeholder="请输入退款金额">
                    </div>

                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="refund" class="btn btn-primary input-group-append">确认</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="refundResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    订单查询
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="commonQuery" class="btn btn-primary input-group-append">查询</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="commonQueryResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    关闭订单
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="closeOrder" class="btn btn-primary input-group-append">确认</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="closeOrderResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    撤消订单
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="cancelOrder" class="btn btn-primary input-group-append">确认</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="cancelOrderResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    退款查询
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="refundQuery" class="btn btn-primary input-group-append">确认</button>
                    </div>
                </div>

                <div class="card text-white bg-dark">
                    <div class="card-body">
                        <h6 class="card-title">返回结果</h6>
                        <div class="card-text" id="refundQueryResult"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    历史订单查询
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">时间</span>
                        </div>
                        <input type="date" class="form-control" id="trade_dt">
                    </div>

                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <input type="text" class="form-control" autocomplete="off" placeholder="请输入订单号">
                        <button type="button" id="hisTradeQuery" class="btn btn-primary input-group-append">确认</button>
                    </div>

                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="hisTradeQueryResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-bottom:0.5rem;">
            <div class="card">
                <div class="card-header">
                    公众号/服务窗统一下单
                </div>
                <div class="card-body">
                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <select id="trade_type" class="custom-select">
                            <option value="">请选择订单类型</option>
                            <option value="JSAPI">公众号支付</option>
                            <option value="FWC">支付宝服务窗</option>
                            <option value="LETPAY">微信小程序</option>
                        </select>
                    </div>

                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">商户用户标识</span>
                        </div>
                        <input type="text" class="form-control" id="sub_openid">
                    </div>

                    <div class="input-group" style="margin-bottom:0.5rem;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">商户公众号id</span>
                        </div>
                        <input type="text" class="form-control" id="sub_appid">
                    </div>

                    <button type="button" id="wxPreCreate" class="btn btn-primary input-group-append">确认</button>

                    <div class="card text-white bg-dark" style="margin-top:0.5rem;">
                        <div class="card-body">
                            <h6 class="card-title">返回结果</h6>
                            <div class="card-text" id="wxPreCreateResult"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script>
        (function ($) {
            var active = {
                pay: function (action, data, callback) {
                    $.ajax({
                        url: 'pay/' + action,
                        method: 'post',
                        data: data
                    }).done(function (res) {
                        $('#' + action + 'Result').html('<pre class="text-white"><code>' + JSON.stringify(res) + '</code></pre>');

                        if (res.response.resultCode === '000000') {
                            callback && typeof (callback) === 'function' && callback(res);
                        }
                    }).fail(function (e, status, error) {
                        $('#' + action + 'Result').html('<pre class="text-white"><code>' + e.responseText + '</code></pre>');

                    });
                }
            };

            $('#Micropay').on('click', function () {
                var barcode = $(this).siblings('input').val(),
                    orderType = $('#orderType').val(),
                    order_amt = $('#orderAmt').val();

                active.pay('micropay', { 'orderType': orderType, 'orderAmt': order_amt, 'authCode': barcode });
            });

            $('#PreCreate').on('click', function () {
                var orderType = $('#orderType').val(),
                    order_amt = $('#orderAmt').val();

                active.pay('preCreate', { 'orderType': orderType, 'orderAmt': order_amt }, function (res) {
                    $('#qrcode').attr('src', 'data:image/png;base64,' + res.base64);
                });
            });

            $('#refund').on('click', function () {
                var orderNo = $(this).siblings('input').val(),
                    orderType = $('#orderType').val(),
                    order_amt = $('#orderAmt').val(),
                    refundAmt = $('#refundAmt').val();

                active.pay('refund', { 'mchntorderno': orderNo, 'orderType': orderType, 'totalamt': order_amt, 'refundAmt': refundAmt });
            });

            $('#commonQuery').on('click', function () {
                var orderNo = $(this).siblings('input').val(),
                    orderType = $('#orderType').val();

                active.pay('commonQuery', { 'mchntorderno': orderNo, 'orderType': orderType });
            });

            $('#closeOrder').on('click', function () {
                var orderNo = $(this).siblings('input').val(),
                    orderType = $('#orderType').val();

                active.pay('closeOrder', { 'mchntorderno': orderNo, 'orderType': orderType });
            });

            $('#cancelOrder').on('click', function () {
                var orderNo = $(this).siblings('input').val(),
                    orderType = $('#orderType').val();

                active.pay('cancelOrder', { 'mchntorderno': orderNo, 'orderType': orderType });
            });

            $('#refundQuery').on('click', function () {
                var orderNo = $(this).siblings('input').val();

                active.pay('refundQuery', { 'refundorderno': orderNo });
            });

            $('#hisTradeQuery').on('click', function () {
                var orderNo = $(this).siblings('input').val(),
                    tradeDt = $('#trade_dt').val(),
                    orderType = $('#orderType').val();

                if (tradeDt.length > 0) {
                    tradeDt = new Date(tradeDt).Format('yyyyMMdd');
                }

                active.pay('hisTradeQuery', { 'mchntorderno': orderNo, 'orderType': orderType, 'tradeDt': tradeDt });
            });

            $('#wxPreCreate').on('click', function () {
                var trade_type = $('#trade_type').val(),
                    order_amt = $('#orderAmt').val(),
                    sub_openid = $('#sub_openid').val(),
                    sub_appid = $('#sub_appid').val();

                active.pay('wxPreCreate', { 'tradeType': trade_type, 'orderAmt': order_amt, 'subopenid': sub_openid, 'subappid': sub_appid });
            });
        })(jQuery);
    </script>
}
